<template>
  <div class="login">
    <div class="login_oNav">
      <img src="../../../static/image/logo111.png" alt="" />
      <span>税东家（国际）税务商学院</span>
    </div>
    <div class="login_oDiv">
      <div class="name">
        <label><img src="../../../static/image/user.png" alt=""/></label>
        <input
          type="text"
          v-model="userName"
          id="username"
          placeholder="请输入姓名"
          maxlength="20"
          @blur="onBlurInput()"
        />
      </div>
      <div class="phone">
        <label><img src="../../../static/image/phone.png" alt=""/></label>
        <input
          type="number"
          v-model="phone"
          id="phone"
          placeholder="请输入手机号"
          @blur="onBlurInput()"
        />
      </div>
      <div class="password">
        <label><img src="../../../static/image/code.png" alt=""/></label>
        <input
          type="number"
          v-model="code"
          id="password"
          placeholder="请输入验证码"
          maxlength="20"
          @blur="onBlurInput()"
        />
        <button class="btn" v-if="show == 1" @click="sendValidCode()">
          获取验证码
        </button>
        <div v-else class="count">（{{ count }}）秒后重新发送</div>
        <div id="errormessage"></div>
      </div>
      <div class="btn_Invice">
        <button
          type="button"
          class="lookInvice"
          @click="getinvice"
          v-if="lr == 1"
        >
          获取发票
        </button>
        <button type="button" class="lookInvice" v-if="lr == 3">
          已获取
        </button>
        <button
          type="button"
          class="lookInvice"
          @click="lookInvice"
          v-if="lr == 4"
        >
          查看发票
        </button>
        <button
          type="button"
          class="denglubutton"
          v-if="Loginok"
          @click="login"
          v-show="statusFlag"
        >
          确认
        </button>
      </div>
      <!-- <button
        type="button"
        class="denglubutton"
        style="background:#77B62E;"
        v-if="pay"
        @click="payYes"
      >
        支付
      </button>-->
      <div class="rule">
        <div class="rule_title">
          <span></span>
          <p>说明</p>
          <span></span>
        </div>
        <p class="rule_one">
          1、支付成功后请保留支付凭证照片，以便您上传凭证。
        </p>
        <p class="rule_two">
          2、完成发票信息后可点击“查看发票”获取电子发票信息
        </p>
        <p class="rule_two">
          3、发票信息填写后，可在一周后查看电子发票
        </p>
      </div>
    </div>
    <div class="invoice_pop" v-if="invoicetwo">
      <div class="invoice_title">
        <img src="../../../static/image/invoice.png" alt="" />
        <span>发票信息</span>
      </div>
      <div class="invoice_type">
        <p>发票类型</p>
        <div @click="getNum(2)">
          <img src="../../../static/image/white.png" alt="" v-if="num == 1" />
          <img src="../../../static/image/checked.png" alt="" v-else />
          <span>公司</span>
        </div>
        <div @click="getNum(1)">
          <img src="../../../static/image/white.png" alt="" v-if="num == 2" />
          <img src="../../../static/image/checked.png" alt="" v-else />
          <span>个人</span>
        </div>
      </div>
      <div class="invoice_input" v-if="num == 2">
        <span>发票抬头</span>
        <input
          type="text"
          placeholder="请输入发票抬头"
          v-model="invoicetitle"
        />
      </div>
      <div class="invoice_input" v-if="num == 2">
        <span>识别号</span>
        <input
          type="text"
          placeholder="请输入纳税人识别号"
          v-model="identify"
        />
      </div>
      <div class="invoice_input" v-if="num == 1">
        <span>识别号</span>
        <input type="text" placeholder="请输入个人身份证号" v-model="idcard" />
      </div>
      <button @click="suerinvoice">确认</button>
    </div>
    <div class="invoice" v-if="invoicetwo" @click="invoicetwo = false"></div>
    <div class="fapiao" v-if="fapiao">
      <img :src="invoice" alt="" @click="dada(invoice)" />
    </div>
    <div class="fapiao_message" v-if="fapiao" @click="fapiao = false"></div>
    <div class="login_Zhe" v-show="ishow">
      <div class="login_Zhe_oitem" @touchmove.prevent>
        <div class="login_oImg">
          <img src="../../../static/image/success.png" alt="" />
          <div>报名成功!</div>
        </div>
        <button class="login_oK" @click="Sussess()" style="cursor:pointer">
          确认
        </button>
      </div>
      <!-- v-show="flieFlag" -->
    </div>
    <div class="login_accountOdiv" v-show="flieFlag">
      <div class="login_account" @touchmove.prevent>
        <ul class="login_account_ul">
          <li>汇款账户</li>
          <li><span>账户名称：</span>北京思沃特国际教育科技有限公司</li>
          <li><span>账户号码：</span>8110701013301858244</li>
          <li><span>开户银行：</span>中信银行北京酒仙桥支行</li>
        </ul>
        <ul class="login_account_news">
          <li>支付信息</li>
          <li>
            <div>
              <span><img src="" alt=""/></span>
              支付凭证：
            </div>
            <div>
              <van-uploader
                multiple
                :max-count="1"
                :max-size="3 * 1024 * 1024"
                @oversize="onOversize"
                :after-read="onRead"
                v-model="fileList"
              >
              </van-uploader>
            </div>
          </li>
        </ul>
        <button type="button" class="loginaccount_ok" @click="loginaOk">
          确认
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  checkPhone,
  sender,
  coursereqPay,
  getInvoice,
  commitInvoice,
  Fileupload,
  Committransfer
} from "../../api/api";
import querystring from "query-string";
import axios from "axios";
import { Uploader } from "vant";

import { Toast } from "mint-ui";

export default {
  name: "Apphomepage",
  data() {
    return {
      show: 1,
      count: "",
      timer: null,
      userName: "",
      phone: "",
      code: "",
      courseId: 3,
      ishow: false,
      Loginok: true,
      pay: false,
      price: "",
      branchId: "",
      Invoince: true,
      fileList: [],
      flieFlag: false,
      isHind: false,
      Img: "",
      Invice: true,
      num: 2,
      invoicetwo: false,
      fapiao: false,
      invoicetitle: "",
      identify: "",
      idcard: "",
      invoice: "",
      lr: 1,
      statusFlag: true
    };
  },
  created() {
    this.courseId = this.$route.query.courseId;
    this.price = this.$route.query.price;
    console.log(this.price);
    this.branchId = this.$route.query.branchId;
    console.log(this.branchId);
  },
  mounted() {
    this.getInvoice();
  },
  methods: {
    //上传图片
    onOversize(file) {
      console.log(file);
    },
    onRead(file) {
      console.log(file);
      let content = file.file;
      console.log(content);
      let data = new FormData();
      data.append("file", content);
      Fileupload(data).then(res => {
        console.log(res);
        this.Img = res.data.data;
      });
    },
    loginaOk() {
      if (this.fileList.length == 0) {
        Toast("请上传图片");
      } else {
        let params = {
          transferImg: this.Img,
          courseId: this.courseId
        };
        params = querystring.stringify(params);
        var a = localStorage.getItem("token");
        a = JSON.parse(a);
        Committransfer(params, a).then(res => {
          console.log(res);
          if (res.data.code == 1) {
            this.ishow = false;
            this.flieFlag = false;
            Toast("上传成功");
            this.getInvoice();
          }
        });
      }
    },
    //确认
    login() {
      let _this = this;
      if (
        _this.username == "" ||
        _this.phone == "" ||
        _this.code == "" ||
        _this.phone.length != 11
      ) {
        Toast("账号、手机号、验证码不能为空");
        return false;
      } else {
        let params = {
          userName: _this.userName,
          phone: _this.phone,
          code: _this.code,
          courseId: _this.courseId
        };
        params = querystring.stringify(params);
        var a = localStorage.getItem("token");
        a = JSON.parse(a);
        checkPhone(params, a).then(res => {
          console.log(res.data.code);
          if (res.data.code == 1) {
            this.ishow = true;
            this.flieFlag = false;
          } else {
            Toast(res.data.message);
          }
        });
      }
    },
    sendValidCode() {
      if (this.username == "" || this.phone == "" || this.phone.length != 11) {
        Toast("请检查手机号");
        return false;
      } else {
        //60秒后重新发送
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = 0;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = 1;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
        let params = {
          phone: this.phone,
          type: 1
        };
        params = querystring.stringify(params);
        sender(params).then(res => {
          if (res.data.code == 1) {
            Toast("发送成功");
          } else {
            Toast(res.data.message);
          }
        });
      }
    },
    //获取发票
    getInvoice() {
      let params = {
        courseId: this.courseId
      };
      params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      getInvoice(params, a).then(res => {
        console.log(res.data.code);
        if (res.data.code == 1) {
          if (res.data.data == "") {
            this.Invice = true;
            this.statusFlag = true;
          } else if (res.data.data.status == 4) {
            this.Invice = false;
            this.lr = 4;
            this.statusFlag = false;
          } else if (res.data.data.status == 2) {
            this.Invice = false;
            this.statusFlag = false;
            this.lr = 1;
          } else if (res.data.data.status == 3) {
            this.lr = 3;
            this.statusFlag = false;
          }
          this.invoice = res.data.data.invoice;
        } else {
          Toast(res.data.message);
        }
      });
    },
    //支付
    // payYes() {
    //   console.log(this.price);
    //   let that = this;
    //   that.bus.$emit("loading", true); //开始
    //      console.log(that.branchId)
    //   let params = {
    //     price: that.price * 100,
    //     courseId: that.courseId,
    //     branchId: that.branchId
    //   };
    //   console.log(params);
    //   params = querystring.stringify(params);
    //   let a = localStorage.getItem("token");
    //   a = JSON.parse(a);
    //   coursereqPay(params, a).then(res => {
    //     console.log(res);
    //     if(res.data.code == 0){
    //        Toast(res.data.message);
    //         that.bus.$emit("loading", false);
    //     }else{

    //     //根据prepayid调用bridge进行支付
    //     console.log(res.data.data.sign);
    //     WeixinJSBridge.invoke(
    //       "getBrandWCPayRequest",
    //       {
    //         appId: res.data.data.appId,
    //         //公众号名称，由商户传入
    //         timeStamp: res.data.data.timeStamp,
    //         //时间戳，自1970年以来的秒数
    //         nonceStr: res.data.data.nonceStr,
    //         paySign: res.data.data.sign,
    //         //随机串
    //         package: res.data.data.package,
    //         signType: res.data.data.signType
    //       },
    //       function(res) {
    //         console.log(res);
    //         if (res.err_msg == "get_brand_wcpay_request:ok") {
    //           Toast("支付成功");
    //           that.$router.push({
    //             path: "/applicationform/homepage",
    //             query: { courseId: that.courseId }
    //           });
    //           // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
    //           // that.ishow = true;
    //           // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
    //         } else {
    //           Toast("未知错误，交易中止");
    //           //that.ishow = true;
    //         }
    //       }
    //     );
    //     }
    //     that.bus.$emit("loading", false); //结束
    //   });
    // },
    //报名成功
    Sussess() {
      this.ishow = false;
      // this.Loginok = false;
      this.pay = true;
      this.flieFlag = true;
    },
    //失去焦点
    onBlurInput() {
      window.scroll(0, 0);
    },
    //点击切换公司、个人
    getNum(index) {
      this.num = index;
      this.invoicetitle = "";
      this.identify = "";
      this.idcard = "";
    },
    //点击图片放大预览
    dada(url) {
      var img = new Array();
      img.push(url);
      WeixinJSBridge.invoke("imagePreview", {
        urls: img,
        current: url
      });
    },
    //查看发票
    lookInvice() {
      this.fapiao = true;
    },
    //获取发票
    getinvice() {
      if (this.Invice == true) {
        return;
      } else {
        this.invoicetwo = true;
      }
    },
    suerinvoice() {
      if (this.invoicetitle == "" && this.num == 0) {
        Toast("请填写发票抬头");
        return false;
      } else if (this.identify == "" && this.num == 0) {
        Toast("请填写识别号");
        return false;
      } else if (this.idcard == "" && this.num == 1) {
        Toast("请填写个人身份证号");
        return false;
      } else {
        let params = {
          courseId: this.courseId,
          invoiceType: this.num,
          creditCode: this.identify,
          enterprise: this.invoicetitle,
          idCard: this.idcard
        };
        console.log(params);
        params = querystring.stringify(params);
        var a = localStorage.getItem("token");
        a = JSON.parse(a);
        commitInvoice(params, a).then(res => {
          console.log(res.data);
          if (res.data.code == 1) {
            Toast("上传成功");
            this.invoicetwo = false;
            this.getInvoice();
          } else {
            Toast(res.data.message);
          }
        });
      }
    }
  }
};
</script>
<style scoped lang="scss">
.count {
  position: absolute;
  width: 3rem;
  height: 0.6rem;
  right: 0;
  bottom: 0.7rem;
  color: #000;
  font-size: 0.2rem;
  text-align: center;
  line-height: 0.4rem;
}
.login {
  width: 100%;
  // height: 100%;
  height: auto;
  background: url("../../../static/image/loginbg.png") no-repeat;
  background-size: 100%;
  background-repeat: no-repeat;
  // position: fixed;
  // padding-top: 0.5rem;
  box-sizing: border-box;
  overflow: hidden;
}
.login_oNav {
  width: 100%;
  height: 1rem;
  display: flex;
  margin-top: 0.5rem;
}
.login_oNav img {
  width: 0.35rem;
  height: 0.51rem;
  margin-left: 0.3rem;
}
.login_oNav span {
  font-size: 0.36rem;
  color: white;
  margin-left: 0.1rem;
  width: 6rem;
}
.login_oDiv {
  width: 6.94rem;
  height: 9.8rem;
  background: white;
  margin: 1.7rem auto;
  // position: absolute;
  // top: 2.74rem;
  // left: 0.28rem;
  border-radius: 0.2rem;
}
#errormessage {
  color: #ff0000;
}
.name {
  height: 1.6rem;
  width: 6rem;
  padding-top: 0.7rem;
  padding-left: 0.62rem;
  position: relative;
}
.name img {
  width: 0.37rem;
  height: 0.36rem;
  position: absolute;
  left: 1rem;
  top: 1rem;
}
#username {
  width: 5.7rem;
  height: 1rem;
  border-radius: 0.5rem;
  border: none;
  background: #f3f3f3;
  padding-left: 0.93rem;
  box-sizing: border-box;
  outline: none;
  font-size: 0.3rem;
}
.phone {
  height: 1.6rem;
  width: 6rem;
  padding-left: 0.62rem;
  position: relative;
}
.phone img {
  width: 0.25rem;
  height: 0.35rem;
  position: absolute;
  left: 1rem;
  top: 0.35rem;
}
#phone {
  width: 5.7rem;
  height: 1rem;
  border-radius: 0.5rem;
  border: none;
  background: #f3f3f3;
  padding-left: 0.93rem;
  box-sizing: border-box;
  outline: none;
  font-size: 0.3rem;
}
.password {
  height: 1.6rem;
  width: 5.7rem;
  position: relative;
  padding-left: 0.62rem;
  font-size: 0.3rem;
}
.password img {
  width: 0.28rem;
  height: 0.35rem;
  position: absolute;
  left: 1rem;
  top: 0.32rem;
}
#password {
  width: 5.7rem;
  height: 1rem;
  border-radius: 0.5rem;
  border: none;
  background: #f3f3f3;
  padding-left: 0.93rem;
  box-sizing: border-box;
  outline: none;
  font-size: 0.3rem;
}
#errormessage {
  width: 5rem;
  height: 0.5rem;
}
.lookInvice {
  width: 40%;
  height: 0.9rem;
  background: #ddd;
  color: #fff;
  border-radius: 0.45rem;
  border: none;
  margin-left: 0.53rem;
  font-size: 0.36rem;
  outline: none;
}
.btn_Invice {
  width: 100%;
  display: flex;
}
.denglubutton {
  width: 40%;
  height: 0.9rem;
  background: #ffb400;
  color: #fff;
  border-radius: 0.45rem;
  border: none;
  margin-left: 0.4rem;
  font-size: 0.36rem;
  outline: none;
}
.loginaccount_ok {
  width: 60%;
  height: 0.9rem;
  background: #ffb400;
  color: #fff;
  border-radius: 0.45rem;
  border: none;
  margin-left: 0.8rem;
  font-size: 0.36rem;
  outline: none;
  margin-top: 0.4rem;
}
.btn {
  width: 2.2rem;
  height: 1rem;
  position: absolute;
  right: 0rem;
  top: 0;
  border: none;
  background: #7279f5;
  color: #fff;
  border-radius: 0.5rem;
  outline: none;
}
.login_Zhe {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  /* opacity: 0.6;*/
  filter: Alpha(opacity=50);
  position: fixed;
  left: 0;
  top: 0;
}
.login_accountOdiv {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  /* opacity: 0.6;*/
  filter: Alpha(opacity=50);
  position: fixed;
  left: 0;
  top: 0;
}
.login_account {
  width: 5.7rem;
  height: 7.6rem;
  background: white;
  // position: absolute;
  // top: 2.74rem;
  // left: 0.9rem;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: 0.2rem;
  box-sizing: border-box;
  padding-top: 0.4rem;
  padding-left: 0.2rem;
  .login_account_ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.26rem;
    li:nth-of-type(1) {
      font-size: 0.32rem;
      margin-bottom: 0.2rem;
      color: #000;
    }
    li {
      color: #666666;
      margin-top: 0.2rem;
      span {
        margin-left: 0.04rem;
      }
    }
  }
  .login_account_news {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.26rem;
    margin-top: 0.2rem;
    li {
      margin-top: 0.4rem;
    }
    li:nth-of-type(1) {
      font-size: 0.32rem;
      margin-bottom: 0.2rem;
    }
    li:nth-of-type(2) {
      display: flex;
      color: #666666;
      div {
        margin-right: 0.3rem;
      }
    }
  }
}
.login_Zhe_oitem {
  width: 5.7rem;
  height: 7.6rem;
  background: white;
  // position: absolute;
  // top: 2.74rem;
  // left: 0.9rem;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: 0.2rem;
  box-sizing: border-box;
  padding-top: 0.96rem;
}
.login_oImg {
  width: 100%;
  height: 4.5rem;
  text-align: center;
}
.login_oImg img {
  width: 3.86rem;
  height: 3.17rem;
  align-items: center;
  margin: auto;
}
.login_oImg div {
  width: 3rem;
  height: 0.9rem;
  margin: auto;
  font-size: 0.36rem;
  font-family: Adobe Heiti Std;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  line-height: 0.38rem;
  margin-top: 0.83rem;
}
.login_oK {
  width: 2.6rem;
  height: 0.8rem;
  background: #ffb400;
  color: #fff;
  border-radius: 0.4rem;
  border: none;
  margin-left: 1.5rem;
  margin-top: 0.47rem;
  outline: none;
  font-size: 0.32rem;
}
.rule {
  width: 6.12rem;
  height: auto;
  margin: auto;
  margin-top: 0.63rem;
  .rule_title {
    width: 100%;
    height: 0.3rem;
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
    span {
      display: inline-block;
      width: 2.5rem;
      height: 0.02rem;
      background: #999999;
    }
    p {
      font-size: 0.3rem;
      color: #333333;
      margin: 0 0.19rem;
    }
  }
  p {
    font-size: 0.24rem;
    color: #999999;
    margin-bottom: 0.1rem;
  }
}
.invoice {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.invoice_pop {
  width: 6.16rem;
  height: 7.38rem;
  background: #ffffff;
  border-radius: 0.2rem;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  .invoice_title {
    width: 84%;
    height: 0.33rem;
    display: flex;
    align-items: center;
    margin-top: 0.64rem;
    img {
      width: 0.33rem;
      height: 0.31rem;
      margin-right: 0.08rem;
    }
    span {
      font-size: 0.34rem;
      color: #000000;
      font-weight: bold;
    }
  }
  .invoice_type {
    width: 84%;
    height: 0.34rem;
    display: flex;
    align-items: center;
    margin-top: 0.53rem;
    font-size: 0.3rem;
    p {
      margin-right: 0.26rem;
      color: #333333;
    }
    div {
      height: 0.34rem;
      display: flex;
      align-items: center;
      img {
        width: 0.28rem;
        height: 0.28rem;
        margin-right: 0.1rem;
      }
    }
    div:nth-child(2) {
      margin-right: 0.4rem;
    }
  }
  .invoice_input {
    width: 84%;
    height: auto;
    margin-top: 0.57rem;
    span {
      display: block;
      font-size: 0.3rem;
      color: #333333;
    }
    input {
      width: 100%;
      height: 0.67rem;
      border: none;
      outline: none;
      border-bottom: 0.02rem solid #dddddd;
      margin-top: -0.34rem;
      font-size: 0.3rem;
    }
  }
  button {
    width: 5.11rem;
    height: 0.8rem;
    background: #ffb400;
    border-radius: 0.4rem;
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.32rem;
    font-weight: bold;
    color: #ffffff;
    border: none;
    outline: none;
    letter-spacing: 0.05rem;
    margin-top: 0.36rem;
  }
}
.fapiao {
  width: 80%;
  height: 6rem;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  img {
    width: 100%;
    background: #ffffff;
  }
}
.fapiao_message {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
</style>